<template>
  <div>
    <a-modal title="预览" v-model="printShow" width="70%" @ok="printOk">
      <div id="caigouPrint" style="width: 94%; center; margin: 0 auto">
        <h3
          class="print-header"
          style="
          text-align: center;
          height: 40px;
          line-height: 40px;
          font-size: 30px;
          bold;
          color:black;
        "
        >
          {{ ModalTitle }}
        </h3>
        <div
          class="print-2header"
          style="
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            height: 35px;
            line-height: 30px;
            font-size: 25px;
            bold;
            color:black;
          "
        >
          <div style="margin-left: 10px">
            单据号:{{ printBaseInfo.document }}
          </div>
          <div style="margin-left: 30px">
            仓库:{{ printBaseInfo.depotName }}
          </div>
          <div style="margin-left: 30px">
            日期:{{ printBaseInfo.documentDate }}
          </div>
          <div style="margin-left: 10px">备注:{{ printBaseInfo.remark }}</div>
        </div>
        <div class="print-table">
          <table
            style="
           
              width: 100%;
              text-align: center;
              border-collapse: collapse;
              font-size: 25px;
              bold;
              color:black;
            "
            border="1px"
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <th>存货名称</th>
              <th>单位</th>
              <th>规格</th>
              <th>数量</th>
              <th>单价</th>
              <th>金额</th>
              <th>备注</th>
            </tr>
            <tr v-for="(item, index) in printDataSource" :key="index">
              <td>{{ item.inventoryName }}</td>
              <td>{{ item.unit }}</td>
              <td>{{ item.standardModel }}</td>
              <td>{{ item.quantity }}</td>
              <td>{{ item.unitPrice }}</td>
              <td>{{ item.money }}</td>
              <td>{{ item.remark }}</td>
            </tr>
          </table>
        </div>

        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            height: 30px;
            line-height: 30px;
            font-size: 25px;
            bold;
            color:black;
          "
        >
          <div style="margin-left: 10px">
            制单人: {{ printBaseInfo.singleProducer_dictText }}
          </div>
          <div style="margin-left: 250px">
            审核人: {{ printBaseInfo.inspector_dictText }}
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import jsPDF from "jspdf";

export default {
  data() {
    return {
      printDataSource: [],
      ModalTitle: "", //标题
      // 打印内容渲染数组
      printRenderData: [],
      // 打印弹窗的显示控制
      printShow: false,
      // 表头 表尾的信息
      printBaseInfo: {
        supplier: "xxx",
        document: "xxx",
        depotName: "xxx",
        documentDate: "xxx",
        remark: "xxx",
      },
    };
  },
  methods: {
    show(data) {
      console.log("data", data);
      this.printShow = true;
      this.ModalTitle = data.PrintTitle;
      this.printBaseInfo.document = data.document;
      this.printBaseInfo.documentDate = data.documentDate;

      this.printBaseInfo.depotName = data.depotName;
      this.printBaseInfo.singleProducer_dictText = data.singleProducer_dictText;
      this.printBaseInfo.inspector_dictText = data.inspector_dictText;

      this.printBaseInfo.remark = data.remark;
      this.printDataSource = data.table;
    },
    // --- 打印初始化 ---
    printGo() {
      this.printShow = true;

      // 过滤物品编码
      let newData = this.DataSource.filter((item) => item.inventoryNo != "");
      let form = this.form;

      let sumNum = 0;
      let sumMoney = 0;

      this.printRenderData = newData.map((item) => {
        sumNum += item.suggestNumber;
        sumMoney += item.amountOfMoney;
        return [
          // 存货编码
          item.inventoryNo,
          // 存货名称
          item.inventoryName,
          // 规格
          item.specificationsModel,
          // 单位
          item.unit,
          // 数量
          item.suggestNumber,
          // 单价
          Number(item.unitPrice),
          // 金额
          item.amountOfMoney,
        ];
      });

      let depotName = form.depotName.split("|"); // 仓库名称

      this.printBaseInfo = {
        supplier: form.supplier_dictText, // 供应商
        document: form.document, // 单据号
        depotName: depotName[2], // 仓库名称
        documentDate: form.documentDate, // 单据日期
        singleProducer: form.formMaker, // 制单人
        sumNum: sumNum,
        sumMoney: sumMoney,
      };
    },

    // --- 打印函数 ---
    printOk() {
      html2canvas(document.querySelector("#caigouPrint"), {
        allowTaint: true,
        taintTest: false,
        scale: "10",
        dpi: "500",
      }).then(function (canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致
        //未生成pdf的html页面高度
        var pageHeight = (contentWidth / 592.28) * 841.89;
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89],单位像素，html页面生成的canvas在pdf中图片的宽高
        // var imgWidth = 595.28;
        // var imgHeight = (595.28 / contentWidth) * contentHeight;
        var imgWidth = 555.28;
        var imgHeight = (555.28 / contentWidth) * contentHeight;
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF("", "pt", "a4");
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
          pdf.addImage(pageData, "JPEG", 20, 10, imgWidth, imgHeight);
          // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
        } else {
          // 分页
          while (leftHeight > 0) {
            pdf.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
            }
          }
        }

        // 生成上传文件
        // var datauri = pdf.output("dataurlstring");
        // var base64 = datauri.split("base64,")[1];
        // var data = { data: base64 };
        var blobPDF = new Blob([pdf.output("blob")], {
          type: "application/pdf",
        });
        var blobUrl = URL.createObjectURL(blobPDF); //<--- THE ERROR APPEARS HERE

        window.open(blobUrl); // will open a new tab

        // 保存的文件名称
        // pdf.save("xxxx" + ".pdf");
      });
    },
  },
};
</script>

<style>
.print-table table td,
.print-table table th,
.print-table table tr {
  border: 1px solid black;
}
.print-table table tr {
  height: 30px;
}
.print-table table th {
  height: 60px;
}
.print-table table td {
  height: 60px;
  
}
</style>
